<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素的各种关系方法</title>
</head>
<body>
<a href="index.html">首页</a>
	<div class="box">
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li class="jony">item3 <a href="">child <span>蓝色的眼睛</span></a></li>
			<li>item4</li>
			<li>item5</li>
		</ul>
	</div>
	<div class="box1">
		<div class="father">
			<p>我是段落</p>
			<h1>我是h1</h1>
			<pre class="pre">我是pre</pre>
			<div>我是div</div>
			<span>我是span</span>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	var jony=$('.jony')
	console.log(jony)//类名为jony的dom元素
	console.log(jony.siblings())//类名为jony的dom元素的兄弟们


	console.log(jony.next())//类名为jony的dom元素下一个兄弟
	console.log(jony.prev())//类名为jony的dom元素上一个兄弟
	console.log(jony.nextAll())//类名为jony的dom元素下面的所有兄弟
	console.log(jony.prevAll())//类名为jony的dom元素上面的所有兄弟

	//父亲
	 console.log(jony.parent())//类名为jony的dom元素的父元素UL
	 console.log(jony.parents('.box'))//类名为jony的dom元素的祖先元素div.box


	// 儿子
	console.log(jony.children())//类名为jony的dom元素的直接子元素
	// 指定的子孙
	console.log(jony.find('span'))//类名为jony的dom元素的类名为.span的子元素


	//测试
	var pre=$('pre');
	console.log(pre);
	console.log(pre.siblings());
	
	</script>
</body>
</html>